<template>
    <div class="container">
        <!--试题题目-->
        <div class="question">
            <div v-html="subject.question"></div>
        </div>
        <!--试题选项多项选择-->
        <el-checkbox-group
                v-if="subject.subtype==='checkbox'"
                v-model="checkList"
                @change="checkbox_change">
            <div class="checkbox_choices" v-for="item in subject.choices">
                <el-checkbox :label="item.choice">{{item.text}}</el-checkbox>
            </div>
        </el-checkbox-group>
        <!--试题选项单项选择-->
        <el-radio-group v-else-if="subject.subtype==='radio'"
                        v-model="radio_value"
                        @change="radio_change">
            <div class="radio_choices" v-for="item in subject.choices">
                <el-radio :label="item.choice">{{item.text}}</el-radio>
            </div>
        </el-radio-group>
        <!--用户简答题-->
        <div v-else-if="subject.subtype==='input'">
            <el-input
                    style="margin-bottom: 10px"
                    v-model.lazy="input_value"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    @input="input_change"
                    placeholder="请输入..."
            />
        </div>
        <!--答案解析 当subject对象提供了answer说明是训练题,checked后会显示-->
        <div v-if="subject.subtype==='input'">
            <div v-if="show_desc">
                <el-alert type="info"
                          description="description" show-icon
                          :closable="false">
                    <div slot="title">
                        <div>解析答案: <p v-html="subject.desc"></p></div>
                    </div>
                </el-alert>
            </div>
        </div>
        <div v-else>
            <div class="desc" v-if="show_desc">
                <el-alert :type="subject.answer===user_answer?'success':'error'"
                          description="description" show-icon
                          :closable="false">
                    <div slot="title">
                        正确答案: {{subject.answer}}，您的答案: {{user_answer}}
                    </div>
                </el-alert>
                <el-alert v-if="subject.desc" type="info" description="description" show-icon :closable="false">
                    <div slot="default" v-html="subject.desc" style="margin-top: 5px">
                    </div>
                </el-alert>
            </div>
        </div>
        <!--查看答案按钮 只有当训练模式，并且是多选题时才显示-->
<!--        <div style="text-align: right"-->
<!--             v-if="mode==='train' && (subject.subtype==='checkbox'||subject.subtype==='input') && !show_desc">-->
<!--            <el-button type="primary" plain size="small" @click="$emit('checked')">查看解析</el-button>-->
<!--        </div>-->
    </div>
</template>

<script>
    import {toRefs, computed} from 'vue'
    import use_recover from "@/components/Question/composables/use_recover";

    export default {
        name: "Question",
        props: {
            subject: {
                type: Object,
                required: true
            },
            user_answer: {
                type: String,
                default: null
            },
            mode: {
                type: String,
                default: 'exam'// train,exam,analysis
            }

        },
        emits: ['checked', 'update:user_answer'],
        setup(props, ctx) {
            const {subject, user_answer, mode} = toRefs(props)
            //是否显示解析的控制变量
            const show_desc = computed(() => {
                //训练模式且用户checked
                const is_train_checked = mode.value === 'train' && subject.value.checked
                //当训练模式用户checked，或者解析模式时显示答案和解析
                return is_train_checked || mode.value === 'analysis'
            })
            //恢复选项 checkList选项卡,radio_value单选框答案,input_value输入框答案
            const {checkList, radio_value, input_value} = use_recover(subject, user_answer)
            //多选框用户选中答案时双向绑定用户答案到父组件
            const checkbox_change = () => {
                checkList.value.sort()
                let _user_answer = checkList.value.join('')
                _user_answer = _user_answer ? _user_answer : null
                ctx.emit('update:user_answer', _user_answer)
            }
            //单选框选中时
            const radio_change = (answer) => {
                ctx.emit('update:user_answer', answer)
                // if (mode.value === 'train') {
                //     ctx.emit('checked')
                // }
            }
            //答题框改变时
            const input_change = (answer) => {
                ctx.emit('update:user_answer', answer)
            }
            return {
                mode,
                subject,//试题对象
                checkList,
                radio_value,
                checkbox_change,
                radio_change,
                user_answer,
                input_change,
                input_value, show_desc
            }
        }
    }
</script>

<style scoped>
    .el-checkbox, .el-radio {
        white-space: normal;
        height: auto;
        width: 100%;
        /*background-color: antiquewhite;*/
        /*padding: 10px;*/
    }

    .el-checkbox >>> .el-checkbox__label, .el-radio >>> .el-el-radio__label {
        letter-spacing: 1px;
        line-height: 20px;
    }

    .el-radio-group {
        display: block;
    }

    .container {
        color: #606266;
        /*margin-bottom: 30px;*/
    }

    .question {
        margin-bottom: 42px;
    }

    .checkbox_choices, .radio_choices {
        margin-bottom: 18px;
        /*background-color: #fef0f0;*/
        /*padding: 10px;*/
    }

    /*.desc {*/
    /*    margin-top: 30px;*/
    /*}*/

</style>
